<template>
	<div>

		<div class="page-bar">

			<ul class="page-breadcrumb">
				<li>
					<a @click="gobackProv">版本管理</a>
					<i class="fa fa-circle"></i>
				</li>
				<li>
					<span>版本修改</span>
				</li>
			</ul>

		</div>

		<el-row style="margin-top:20px">

			<el-col :span="6">&nbsp;</el-col>

			<el-col :span="12">

				<el-form :model="numberValidateForm"  :rules="rules"  ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
					<el-form-item label="版本号" prop="versionNo" >
						<el-input type="versionNo"  :maxlength="20"  v-model="numberValidateForm.versionNo" auto-complete="off"></el-input>
					</el-form-item>
					<!--<el-form-item label="APK上传">-->
						<!--<el-upload-->
								<!--class="upload-demo"-->
								<!--:action="upfileurl"-->
								<!--:on-preview="handlePreview"-->
								<!--:on-remove="handleRemove"-->
								<!--:file-list="fileList">-->
							<!--<el-button size="small" type="primary">点击上传</el-button>-->
							<!--<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
						<!--</el-upload>-->
					<!--</el-form-item>-->
					<el-form-item>
						<el-button type="primary" @click="submitForm('numberValidateForm')">确定</el-button>
						<el-button  @click="gobackProv()">返回</el-button>
					</el-form-item>
				</el-form>

				<!--<el-form label-width="100px" class="demo-ruleForm">-->

				<!--<el-form-item label="版本号">-->

				<!--<el-input class="el-input2" v-model="versionForm.name"></el-input>-->

				<!--</el-form-item>-->

				<!--<el-form-item label="APK上传">-->

				<!--<el-upload-->
				<!--class="upload-demo"-->
				<!--ref="upload"-->
				<!--action="https://jsonplaceholder.typicode.com/posts/"-->
				<!--:on-preview="handlePreview"-->
				<!--:on-remove="handleRemove"-->
				<!--:file-list="fileList"-->
				<!--:auto-upload="false">-->
				<!--<el-button slot="trigger" size="small" type="default">选取文件</el-button>-->
				<!--&lt;!&ndash; <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> &ndash;&gt;-->
				<!--<span slot="tip" class="el-upload__tip">只能上传APK</span>-->
				<!--</el-upload>-->

				<!--</el-form-item>-->

				<!--<el-form-item>-->
				<!--<el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>-->
				<!--<el-button @click="gobackProv()">取消</el-button>-->
				<!--</el-form-item>-->

				<!--</el-form>-->


			</el-col>


			<el-col :span="6">&nbsp;</el-col>

		</el-row>


	</div>
</template>

<script>
    import {VersionSrv} from './version.service';
    import { Notification } from 'element-ui';
    export default {


        data() {
            var validatorstyle =  (rule, value, callback) => {
                var patt = /^\d+(\.\d+)*$/;

                if (!patt.test(value)) {
                    callback('版本号格式不正确');
                } else {
                    callback();
                }
            }
            var validatoryes =  (rule, value, callback) => {
                var patt = /^\d+(\.\d+)*$/;

                if (value == '111') {
                    callback('版本号已经存在');
                } else {
                    callback();
                }
            }
            return {
                rules: {
                    versionNo: [{ required: true, message: '版本号不能为空'},
                        { validator: validatorstyle, trigger: 'blur' },
                        {
                            min: 1,
                            max:20,
                            message: '版本号必须为1 到 20 位',
                            trigger: 'blur'
                        },
                        { validator: validatoryes, trigger: 'blur' },
                    ],
                    downloadUrl:[
                        { required: true, message: ' '}]
                },
                id:this.$route.params.id,
                fileList: [],
                numberValidateForm: {
                    versionNo:""
                },
                upfileurl:globalConfig.apiPath.v1+'pmat/api/v1/upload?token='+ window.localStorage.getItem('token')

            };

        },

        methods: {

            gobackProv() {
                this.$router.push({name: 'version'});
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },

            submitUpload() {
                this.$refs.upload.submit();
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },



            submitForm(formName) {

                this.$refs[formName].validate((valid) => {

                    if (valid) {
                        this.numberValidateForm.id = this.$route.params.id
						console.log(this.numberValidateForm.id);
                        VersionSrv.updateAPP(this.numberValidateForm).then(req => {
                            Notification.success({
								title: '版本修改',
					          	message: '修改成功',
					          	offset: 50
					        })
                            this.$router.push({name: 'version'});
                        })

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }

        },
		created(){
            this.numberValidateForm.id = this.$route.params.id
            VersionSrv.queryByIdAPP({id:this.$route.params.id}).then(req => {
                console.log( req);
                this.numberValidateForm = req.data
            })
		}


    }

</script>

<style scoped>

	.el-upload__input {
		display: none !important;
	}

	.el-input2 {
		width: 100% !important;
	}

	.demo-ruleForm {
		width: 500px;
	}

	.el-form {
		width: 500px;
	}
</style>